<!-- ComForm.vue -->
<template>
  <el-card v-if="localCom.id" shadow="never">
    <h3>{{ localCom.interfaceName }}</h3>
    <el-form label-position="top" :model="localCom" class="right_form">
      <el-row :gutter="40">
        <el-col v-for="field in formFields" :key="field.prop" :span="4">
          <el-form-item :prop="field.prop" :label="field.label">
            <el-select v-model="localCom.interfacePar[field.prop]">
              <el-option
                v-for="(item, index) in field.options"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="applyChanges"> 应用 </el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script setup>
import { defineProps, defineEmits, ref } from "vue";

// 定义 Props
const props = defineProps({
  com: {
    type: Object,
    required: true
  },
  index: {
    type: Number,
    required: true
  }
});

const emit = defineEmits(["update-com"]);

const localCom = ref({ ...props.com });

const formFields = [
  {
    prop: "baudRate",
    label: "波特率",
    options: [
      { value: 1200, label: "1200" },
      { value: 2400, label: "2400" },
      { value: 4800, label: "4800" },
      { value: 9600, label: "9600" },
      { value: 19200, label: "19200" },
      { value: 38400, label: "38400" },
      { value: 57600, label: "57600" },
      { value: 115200, label: "115200" }
    ] // 从 props 获取波特率选项
  },
  {
    prop: "dataBits",
    label: "数据位",
    options: [
      { label: "7", value: 7 },
      { label: "8", value: 8 }
    ]
  },
  {
    prop: "stopBits",
    label: "停止位",
    options: [
      { label: "1", value: 1 },
      { label: "2", value: 2 }
    ]
  },
  {
    prop: "parity",
    label: "校验位",
    options: [
      { label: "None", value: 0 },
      { label: "Odd", value: 1 },
      { label: "Even", value: 2 }
    ]
  },
  {
    prop: "frameBreakTime",
    label: "断帧时间",
    options: [
      { label: "Auto", value: 0 },
      { label: "20", value: 20 },
      { label: "30", value: 30 },
      { label: "50", value: 50 },
      { label: "100", value: 100 }
    ]
  }
];

// 发出事件
const applyChanges = () => {
  // console.log("发出的数据:", { index: props.index, data: localCom.value }); // 打印要发出的数据
  emit("update-com", { index: props.index, data: localCom.value });
};
</script>
<style scoped sass>
.right_form :deep(.el-form-item--label-top) {
  display: flex !important;
}

/* form前面的label */
.right_form :deep(.el-form-item__label) {
  line-height: 32px !important;
  margin-bottom: 0 !important;
  width: 82px !important;
  padding-right: 8px !important;
  text-align: right !important;
}
/* 整体的label  value框 */
.right_form :deep(.el-col) {
  padding: 0px 0px 0px 15px !important;
  /* border: 1px solid red; */
}
.right_form :deep(.el-form-item) {
  margin-bottom: 6px;
}

/* com口的样式 */
.com_item :deep(.el-card__body) {
  padding: 8px 5px 0px !important;
}
</style>
<!-- <el-card v-if="com1.id" shadow="never">
          <h3>{{ com1.interfaceName }}</h3>
          <el-form label-position="top" :model="com1" class="right_form">
            <el-row :gutter="40">
              <el-col :span="4">
                <el-form-item prop="baudRate" label="波特率">
                  <el-select v-model="com1.interfacePar.baudRate">
                    <el-option
                      v-for="(item, index) in baudRateDate"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="dataBits" label="数据位">
                  <el-select v-model="com1.interfacePar.dataBits">
                    <el-option label="7" :value="7" />
                    <el-option label="8" :value="8" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="stopBits" label="停止位">
                  <el-select v-model="com1.interfacePar.stopBits">
                    <el-option label="1" :value="1" />
                    <el-option label="2" :value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="parity" label="校验位">
                  <el-select v-model="com1.interfacePar.parity">
                    <el-option label="None" :value="0" />
                    <el-option label="Odd" :value="1" />
                    <el-option label="Even" :value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="frameBreakTime" label="断帧时间">
                  <el-select v-model="com1.interfacePar.frameBreakTime">
                    <el-option label="Auto" :value="0" />
                    <el-option label="20" :value="20" />
                    <el-option label="30" :value="30" />
                    <el-option label="50" :value="50" />
                    <el-option label="100" :value="100" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="updateCom(1)">
                  应用
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card> -->
